<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

const props = defineProps<{
  modalRef: any
}>()

const emit = defineEmits<{
  (e: 'update-theme', color: string): void
}>()

const userStore = useUserStore()
const colorInput = ref('')

const presetColors = [
  '#64E9EE',  // 蓝绿
  '#7EE1C8',  // 薄荷绿
  '#85A1F2',  // 蓝紫
  '#B39DDB',  // 紫
  '#FF9CAE',  // 粉
  '#FFB74D',  // 橙
  '#9CCC65',  // 绿
  '#4DD0E1'   // 蓝
]

const handleColorChange = (color: string) => {
  colorInput.value = color
  previewThemeColor(color)
}

const previewThemeColor = (color: string) => {
  if (!isValidColor(color)) return
  document.documentElement.style.setProperty('--theme-color', color)
}

const updateThemeColor = (color: string) => {
  if (!isValidColor(color)) {
    ElMessage.warning('请输入有效的颜色值')
    return
  }
  emit('update-theme', color)
}

const isValidColor = (color: string): boolean => {
  const s = new Option().style
  s.color = color
  return s.color !== ''
}

const closeModal = () => {
  const currentTheme = userStore.backgroundColor || '#335eea'
  document.documentElement.style.setProperty('--theme-color', currentTheme)
  props.modalRef?.closeModal()
}

onMounted(() => {
  colorInput.value = userStore.backgroundColor || '#335eea'
})
</script>

<template>
  <div class="color-picker">
    <h3>选择主题色</h3>
    
    <div class="input-section">
      <input 
        type="text" 
        v-model="colorInput"
        placeholder="#60e1ef"
        @input="handleColorChange(colorInput)"
      >
      <input 
        type="color" 
        v-model="colorInput"
        @input="handleColorChange(colorInput)"
      >
    </div>

    <div class="preset-colors">
      <div 
        v-for="color in presetColors" 
        :key="color"
        class="color-item"
        :style="{ backgroundColor: color }"
        @click="handleColorChange(color)"
      ></div>
    </div>

    <div class="buttons">
      <button class="cancel-btn" @click="closeModal">取消</button>
      <button 
        class="confirm-btn" 
        @click="updateThemeColor(colorInput)"
      >
        确认
      </button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.color-picker {
  padding: 24px;
  
  h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 18px;
    text-align: center;
  }

  .input-section {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;

    input[type="text"] {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
      border-radius: 8px;
      background: var(--bgc-color-1);
      color: var(--primary-color);
      
      &:focus {
        border-color: var(--theme-color);
        outline: none;
      }
    }

    input[type="color"] {
      width: 40px;
      padding: 2px;
      border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
      border-radius: 8px;
      background: var(--bgc-color-1);
      cursor: pointer;

      &::-webkit-color-swatch-wrapper {
        padding: 0;
      }
      
      &::-webkit-color-swatch {
        border: none;
        border-radius: 4px;
      }
    }
  }

  .preset-colors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;

    .color-item {
      aspect-ratio: 1;
      border-radius: 8px;
      cursor: pointer;
      transition: transform 0.2s;
      border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);

      &:hover {
        transform: scale(1.1);
      }
    }
  }

  .buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;

    button {
      padding: 8px 16px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      transition: all 0.3s;
      font-size: 14px;

      &.cancel-btn {
        background: color-mix(in srgb, var(--bgc-color-1) 95%, transparent);
        color: var(--primary-color);
        border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);

        &:hover {
          background: color-mix(in srgb, var(--bgc-color-1) 90%, transparent);
        }
      }

      &.confirm-btn {
        background: var(--theme-gradient);
        color: var(--bgc-color-1);

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px var(--theme-shadow);
        }
      }
    }
  }
}
</style> 